{% extends "base.html" %}

{% block head %}
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
{% endblock %}

{% block content %}
{% verbatim vue %}
<br />
<div id="app">
  <span style="float:left">得分：{{ score }}</span>
  <span style="float:right">剩余次数： {{ lives }} </span>
  <br />
  <hr />
  <div class="row" align="center">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">{{ chinese }}</h4>
          <br />
          <input class="form-control" v-for="char,index in guess" v-model="guess[index]" style="height:50px;width:50px;display:inline;text-align:center;font-size:25px;margin:5px" disabled />
        </div>
        <div v-show="over">
          <p>{{ message }}</p>
          <button type="button" class="btn btn-primary" v-on:click="finish">{{ btn_msg }}</button>
          <br /><br />
        </div>
      </div>
      <br />
      <p v-if="btns">
        <button v-for="i in 24" type="button" class="btn btn-dark" v-bind:style="btn_style(i-1)" v-on:click="click_btn(i-1,$event)">{{ btns[i-1] }}</button>
      </p>
      <br />
    </div>
    <div class="col-md-2"></div>
  </div>
</div>
{% endverbatim vue %}

<script src="/static/test.js"></script>
{% endblock %}
